<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/-->
<!DOCTYPE html>
<html lang="en">
<head>

    <title>登录</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Pet Adoption Form  Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //custom-theme -->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <link href="../css/style1.css" rel="stylesheet" type="text/css" media="all" />
    <link href="//fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800&amp;subset=latin-ext" rel="stylesheet">
</head>
<script>
    $(function () {
        $("#validateCode").keyup(function(){
            checkLoginValidateCode($(this).val());
        });
    });
    function uploadLoginValidateCode() {
        $("#loginValidateCode").attr("src","/users/loginValidateCode?random="+new Date().getMilliseconds());
    }
    function checkLoginValidateCode(validateCode) {
        if(validateCode != null && validateCode != ""){
            $.ajax({
                type: "POST",
                async:false,
                url: "/users/checkLoginValidateCode?validateCode="+validateCode,
                success : function(json) {
                    if(json != null && json.code == 200 && json.status != null) {
                        if (json.status == true) {
                            $("#err").text("");
                        } else if(json.status == false){
                            $("#err").text("验证码错误，请重新输入");
                        }else{
                            $("#err").text("验证码过期，请重新输入");
                            uploadLoginValidateCode();
                        }
                    }
                    return false;
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert("服务器错误！状态码："+XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                    return false;
                }
            });
        }else{
            $("#err").text("请输入验证码！");
        }
    }
    function login() {
        var username = $("#username").val();
        if(username==""||username==null){
            $("#uname").text("用户名不能为空!");
            return;
        }else{
            $("#uname").text("");
        }
        var password = $("#password").val();
        if(password==""||password==null){
            $("#upwd").text("密码不能为空!");
            return;
        }else{
            $("#upwd").text("");
        }
        var yzm = $("#validateCode").val();
        if(yzm==""||yzm==null){
            alert("请输入验证码!");
            return;
        }else{
            if($("#err").text()=="验证码错误，请重新输入"||$("#err").text()=="验证码过期，请重新输入"){
                return;
            }
        }
        $.ajax({
            url:"/users/login",
            data:{"username":username,"password":password},
            success:function (result) {
                if(result>0){
                    alert("登录成功!");
                    window.location.href = "index.html";
                }else {
                    alert("用户名或密码错误!");
                }
            }
        })
    }
</script>
<body class="agileits_w3layouts">
<h1 class="agile_head text-center" style="padding-left: 430px">铛铛宠物店</h1>
<div class="w3layouts_main wrap">
    <h2>账号登录</h2>
    <form class="agile_form">
        <div class="icon1 w3ls-name1">
            <label>用户名<span id="uname" style="color:red"></span></label>
            <input  placeholder=" " id="username" name="username" type="text" required="">
        </div>
        <div class="icon1 icon2">
            <label>密码<span id="upwd" style="color:red"></span></label>
            <input  placeholder=" " id="password" name="password" type="password" required="">
        </div>
        <div class="clear"></div>
        <div style="padding-top: 30px">
        <p><input type="text" id="validateCode" name="validateCode" style="width: 100px"/></p>
            &nbsp;&nbsp;&nbsp;<img id="loginValidateCode" height="50" width="150"  style="cursor: pointer;" src="/users/loginValidateCode" onclick="uploadLoginValidateCode();">
            <span id="err" style="color: red"></span>
        </div>

        <div style="padding-top: 30px"><input name="sub" value="submit" type="button" onclick="login()"/><span style="padding-left: 280px"><a href="yzmlogin.html" style="color: red">验证码登录</a></span></div>
    </form>
</div>
<div class="clear"></div>
</body>
</html>